<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0rem;
			}

			#box {
				width: 14.375rem;
				height: 20rem;
				position: relative;
				border: solid 1px #C9C9C9;
				margin-left: 3.125rem;
			}

			.top {
				width: 9.375rem;
				height: 9.375rem;
				position: absolute;
				left: 2.5rem;
				top: 2.5rem;
			}

			.top img {
				width: 9.375rem;
				height: 9.375rem;
				z-index: -1;
			}

			.middle {
				position: absolute;
				font-size: 0.875rem;
				color: #999999;
				top: 14.5rem;
				max-width: 11.25rem;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				left: 1.25rem;
			}

			.bottom {
				width: 6.5rem;
				height: 1.875rem;
				background-color: black;
				font-size: 0.875rem;
				color: white;
				text-align: center;
				border-radius: 40% 40%;
				line-height: 1.25rem;
				vertical-align: middle;
				position: absolute;
				left: 3.5rem;
				display: none;
			}

			#price {
				position: absolute;
				color: #F10215;
				font-size: 1.375rem;
				left: 1.25rem;
			}

			#show {
				position: absolute;
				width: 14.375rem;
				height: 2.5rem;
				top: 17.5rem;
			}
			.reduce{
				width: 0.625rem;
				height: 0.75rem;
				font-size: 0.75rem;
				border: #F10215 solid 0.0625rem;
				margin-left:5rem;
			}
			.myself{
				width:0.875rem;
				height:0.875rem;
				color: white;
				background-color: #F10215;
			}
			.a{
				text-align: center;
				margin-top: 0.25rem;
			}
			.slider{
				width: 9.375rem;
				height: 9.375rem;
				z-index: 1;
				background-color: black/* rgba(255,255,255,0.3) */;
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="top"><img src="../imgs/89c59b5f8176428c.jpg.webp.jpg"><span class="slider"></span></div>
			<div class="middle">
				<span class="myself">自营</span>
				<span>景田 饮用纯净水 </span><br>
				<span>560ml*24瓶 整箱装</span>
			</div>
			<div id="show">
				<div id="bottom" class="bottom"><div class="a"><img src="../imgs/眼睛.png">找相似</div></div>
				<div id="price">
					<span>￥40.00</span>
					<span class="reduce">满减</span>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			window.onload=function(){
			var show = document.getElementById("show");
			var bottom = document.getElementById("bottom");
			var price = document.getElementById("price");
			show.onmousemove = function() {
				bottom.style.display = "block";
				price.style.display="none";
			}
			show.onmouseout = function() {
				bottom.style.display = "none";
				price.style.display="block";
			}
			}
		</script>
	</body>
</html>
